<template>
  <div class="tab-container">
    <div
      v-for="category in categories"
      :key="category.id"
      class="tab-item"
    >
      <slot :category="category">
        <div
          class="default-tab"
          :class="{ active: category.id === modelValue }"
          @click="$emit('update:modelValue', category.id)"
        >
          {{ category.name }}
        </div>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Category {
  id: number
  name: string
  description?: string
}

interface Props {
  categories: Category[]
  modelValue: number
}

interface Emits {
  (e: 'update:modelValue', value: number): void
}

defineProps<Props>()
defineEmits<Emits>()
</script>

<style scoped>
.tab-container {
  display: flex;
  flex-direction: column;
}

.default-tab {
  padding: 10px 15px;
  margin: 4px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.default-tab:hover {
  background-color: #f0f9ff;
}

.default-tab.active {
  background-color: #42b883;
  color: white;
}
</style>